<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成员关系管理</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: auto; padding: 20px; }
        h1 { text-align: center; }
        #membership-form { margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
        label { display: block; margin-top: 10px; }
        input[type="text"] { width: 100%; padding: 5px; margin-top: 5px; margin-bottom: 10px; }
        button { margin-right: 10px; }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入全局样式 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 导航栏 HTML 放在每个页面顶部 -->
<nav class="navbar">
    <a href="index.html">社团管理</a>
    <a href="members.html">成员管理</a>
    <a href="memberships.html">成员关系管理</a>
    <a href="activities.html">活动管理</a>
    <a href="departments.html">部门管理</a>
</nav>
<h1>成员关系管理</h1>

<!-- 新增/编辑成员关系的表单 -->
<div id="membership-form">
    <h2 id="form-title">新增成员关系</h2>
    <input type="hidden" id="membership-id">
    <label for="member-id">成员ID:</label>
    <input type="text" id="member-id" required>
    <label for="department-id">部门ID:</label>
    <input type="text" id="department-id" required>
    <label for="club-id">社团ID:</label>
    <input type="text" id="club-id" required>
    <button onclick="handleSubmit()">提交</button>
    <button onclick="clearForm()">取消</button>
</div>

<!-- 成员关系列表 -->
<h2>成员关系列表</h2>
<table id="membership-table" border="1" cellspacing="0" cellpadding="8">
    <thead>
    <tr>
        <th>ID</th>
        <th>成员</th>
        <th>部门</th>
        <th>社团</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="membership-table-body"></tbody>
</table>

<script>
    const api = axios.create({
        baseURL: 'http://localhost:8080', // 替换为后端 API 的实际 URL
        headers: { 'Content-Type': 'application/json' }
    });

    document.addEventListener('DOMContentLoaded', fetchMemberships);

    function fetchMemberships() {
        api.get('/memberships')
            .then(response => {
                const memberships = response.data.data;
                const tbody = document.getElementById('membership-table-body');
                tbody.innerHTML = '';

                memberships.forEach(membership => {
                    const row = document.createElement('tr');
                    //若为空 则填充默认值
                    row.innerHTML = `
              <td>${membership.membershipId ?? ""}</td>
              <td>${membership.memberName ?? ""}</td>
              <td>${membership.departmentName ?? ""}</td>
              <td>${membership.clubName ?? ""}</td>
              <td>
                <button onclick="editMembership(${membership.membershipId})">编辑</button>
                <button onclick="deleteMembership(${membership.membershipId})">删除</button>
              </td>
            `;
                    tbody.appendChild(row);
                });
            })
            .catch(error => console.error('获取成员关系列表失败', error));
    }

    function handleSubmit() {
        const membershipId = document.getElementById('membership-id').value;
        const memberId = document.getElementById('member-id').value;
        const departmentId = document.getElementById('department-id').value;
        const clubId = document.getElementById('club-id').value;
        const membership = { memberId, departmentId, clubId };

        if (membershipId) {
            api.put(`/memberships/${membershipId}`, membership)
                .then(() => {
                    alert('成员关系更新成功');
                    fetchMemberships();
                    clearForm();
                })
                .catch(error => console.error('更新成员关系失败', error));
        } else {
            api.post('/memberships', membership)
                .then(() => {
                    alert('成员关系创建成功');
                    fetchMemberships();
                    clearForm();
                })
                .catch(error => console.error('创建成员关系失败', error));
        }
    }

    function editMembership(membershipId) {
        api.get(`/memberships/${membershipId}`)
            .then(response => {
                const membership = response.data;
                document.getElementById('membership-id').value = membership.membershipId;
                document.getElementById('member-id').value = membership.memberId;
                document.getElementById('department-id').value = membership.departmentId;
                document.getElementById('club-id').value = membership.clubId;
                document.getElementById('form-title').innerText = '编辑成员关系';
            })
            .catch(error => console.error('获取成员关系失败', error));
    }

    function deleteMembership(membershipId) {
        if (confirm('确定要删除该成员关系吗？')) {
            api.delete(`/memberships/${membershipId}`)
                .then(() => {
                    alert('成员关系删除成功');
                    fetchMemberships();
                })
                .catch(error => console.error('删除成员关系失败', error));
        }
    }

    function clearForm() {
        document.getElementById('membership-id').value = '';
        document.getElementById('member-id').value = '';
        document.getElementById('department-id').value = '';
        document.getElementById('club-id').value = '';
        document.getElementById('form-title').innerText = '新增成员关系';
    }
</script>
</body>
</html>